<!DOCTYPE html>
<html>
<head lang="zh">
    <meta charset="UTF-8">
    <title>课程练习</title>
    <meta content="课程教学实例" name="Description">
    <meta content="bootstrap 前端学习 css" name="Keywords">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--坑爹的IE兼容-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--将360默认为极速模式打开 -->
    <meta name="renderer" content="webkit">
    <!-- Bootstrap -->
    <link href="//cdn.bootcss.com/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!--页头-->
<header>
  <div class="container" style="margin-top: 23px;">
    <nav class="navbar navbar-inverse">
      <div class="navbar-inner">
            <div class="container">
                <ul class="nav">
                    <li>
                        <a href="#" style="margin-right: 10px;">Projact name</a>
                    </li>
                    <li><a href="#" style="margin-right: 10px;">Home</a></li>
                    <li><a href="#" style="margin-right: 20px;">About</a></li>
                    <li><a href="#" style="margin-right: 20px;">Contact</a></li>
                </ul>
                <ul>
                    <li><a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Dropdown
                        <span class="caret"></span></a></li>
                </ul>

            </div>


      </div>
    </nav>
  </div>
    <div id="myCarousel" class="carousel slide">
        <div class="carousel-inner">
            <div class="active item">
                <img src="./img/slide-01.jpg" alt>
                <div class="container">
                    <div class="carousel-caption span7" style="margin-top: 134px;">
                        <h1>Example headline</h1>
                        <p class="lead">
                            Cras justo odio, dapibus ac facilisis in, egestas eget
                            quam. Donec id elit non mi porta gravida at eget metus.
                            Nullam id dolor id nibh ultricies vehicula ut id elit.
                        </p>
                        <a href="#" class="btn btn-large btn-primary">Sign up today</a>
                    </div>
                </div>
            </div>
            <div class="item">
                <img src="./img/slide-02.jpg" alt>
                <div class="container">
                    <div class="carousel-caption span7" style="margin-top: 134px;">
                        <h1>Another example headline.</h1>
                        <p class="lead">
                            Cras justo odio, dapibus ac facilisis in, egestas eget
                            quam. Donec id elit non mi porta gravida at eget metus.
                            Nullam id dolor id nibh ultricies vehicula ut id elit.
                        </p>
                        <a href="#" class="btn btn-large btn-primary">Learn more</a>
                    </div>
                </div>
            </div>
            <div class="item">
                <img src="./img/slide-03.jpg" alt>
                <div class="container">
                    <div class="carousel-caption span7" style="margin-top: 134px;">
                        <h1>One more for good measure.</h1>
                        <p class="lead">
                            Cras justo odio, dapibus ac facilisis in, egestas eget
                            quam. Donec id elit non mi porta gravida at eget metus.
                            Nullam id dolor id nibh ultricies vehicula ut id elit.
                        </p>
                        <a href="#" class="btn btn-large btn-primary">Browse gallery</a>
                    </div>
                </div>
            </div>
        </div>
        <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
    </div>

</header>
        <!--正文-->
<article>
    <div class="container" >
        <div class="row">
            <div class="span4" style="margin-top: 45px; text-align: center;">
                <img src="./img/8.png" class="img-circle">
                <h2 style="text-align: center;">Heading</h2>
                <p>Donec sed odio dui. Etiam porta
                    sem malesuada magna mollis
                    euismod. Nullam id dolor id nibh
                    ultricies vehicula ut id elit. Morbi
                    leo risus, porta ac consectetur
                    ac, vestibulum at eros. Praesent
                    commodo cursus magna, vel
                    scelerisque nisl consectetur et.</p>
                <a class="btn" href="#">View details »</a>
            </div>
            <div class="span4" style="margin-top: 45px; text-align: center;">
                <img src="./img/8.png" class="img-circle">
                <h2 style="text-align: center;">Heading</h2>
                <p>Duis mollis, est non commodo
                    luctus, nisi erat porttitor ligula,
                    eget lacinia odio sem nec elit.
                    Cras mattis consectetur purus sit
                    amet fermentum. Fusce
                    dapibus, tellus ac cursus
                    commodo, tortor mauris
                    condimentum nibh, ut
                    fermentum massa justo sit amet
                    risus.</p>
                <a class="btn" href="#">View details »</a>
            </div>
            <div class="span4" style="margin-top: 45px; text-align: center;">
                <img src="./img/8.png" class="img-circle">
                <h2 style="text-align: center;">Heading</h2>
                <p>Donec sed odio dui. Cras justo
                    odio, dapibus ac facilisis in,
                    egestas eget quam. Vestibulum
                    id ligula porta felis euismod
                    semper. Fusce dapibus, tellus
                    ac cursus commodo, tortor
                    mauris condimentum nibh, ut
                    fermentum massa justo sit amet
                    risus.</p>
                <a class="btn" href="#">View details »</a>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="span6" style="margin-top: 310px;">
                <h2 class="container-heading">First featurette headling.
                <span class="muted"> It'll blow your mind.</span>
                </h2>
                <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id
                    ligula porta felis euismod semper. Praesent commodo cursus
                    magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac
                    cursus commodo.</p>
            </div>
            <div class="span6" style="margin-top: 205px; text-align: center;">
                <img class="container-image pull-right" src="./img/9.png"/>
            </div>
        </div>

    </div>
    <div class="container">
        <div class="row">
            <div class="span6" style="margin-top: 200px; text-align: center;">
                <img class="container-image pull-left" src="./img/10.png"/>
            </div>
            <div class="span6" style="margin-top: 330px;">
                <h2 class="container-heading">Oh yeah, it's that good.
                    <span class="muted">See for yourself.</span>
                </h2>
                <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id
                    ligula porta felis euismod semper. Praesent commodo cursus
                    magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac
                    cursus commodo.</p>
            </div>

        </div>

    </div>
    <div class="container">
        <div class="row">
            <div class="span6" style="margin-top: 330px;">
                <h2 class="container-heading">And lastly, this one.
                    <span class="muted">Checkmate.</span>
                </h2>
                <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id
                    ligula porta felis euismod semper. Praesent commodo cursus
                    magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac
                    cursus commodo.</p>
            </div>
            <div class="span6" style="margin-top: 220px; text-align: center;">
                <img class="container-image pull-right" src="./img/11.png"/>
            </div>
        </div>

    </div>
</article>

        <!--页脚-->
<footer>
    <div class="container">
        <div class="row">
            <div class="span12" style="margin-top: 200px;">
                <p>© 2013 Company, Inc.
                    <a href="#" style="color: cornflowerblue; margin-left: 18px;">Privacy</a>
                    <a href="#" style="color: cornflowerblue; margin-left:18px;">Terms</a>
                    <a href="#" class="pull-right">Back to top</a></p>

            </div>

        </div>
    </div>
</footer>
<script src="http://code.jquery.com/jquery.js"></script>

<script src="//cdn.bootcss.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>
</body>

</html>